<template>
  <div id="singleCarContainer">
    <div class="selectBox">
      <span class="lineText">线路</span>
      <el-select
        class="lineSelector"
        v-model="lineSelected"
        placeholder="请选择"
      >
        <el-option
          v-for="item in lineOptions"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
      <span class="trannumberText">车号</span>
      <el-select
        class="trainSelector"
        v-model="trainSelected"
        placeholder="请选择"
      >
        <el-option
          v-for="item in trainOptions[lineSelected]"
          :key="item"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>
      <el-button class="normalBtn">
        跳转至其他车
      </el-button>
    </div>
    <div class="tabBox">
      <el-tabs v-model="activeSystem">
        <el-tab-pane
          v-for="item in systemOptions"
          :key="item.name"
          :label="item.name"
          :value="item.name"
        >
          <component :is="item.comp" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import sixA from '@/components/SingelCar/6A'
import lkj from '@/components/SingelCar/LKJ'
import tcms from '@/components/SingelCar/TCMS'
import hmi from '@/components/SingelCar/HMI'
import beidou from '@/components/SingelCar/Beidou'
import sixAMonitor from '@/components/SingelCar/6AMonitor'

export default {
  name: 'sigleCar',
  components: {
    sixA,
    lkj,
    tcms,
    hmi,
    beidou,
    sixAMonitor
  },
  data () {
    return {
      lineSelected: '',
      lineOptions: ['线路一', '线路二'],
      trainSelected: '',
      trainOptions: {
        '线路一': ['011718', '011719'],
        '线路二': ['021718', '021719']
      },
      activeSystem: '',
      systemOptions: [
        {
          name: 'LKJ系统',
          comp: 'lkj'
        },
        {
          name: 'TCMS系统',
          comp: 'tcms'
        },
        {
          name: '北斗系统',
          comp: 'beidou'
        },
        {
          name: '6A系统',
          comp: 'sixA'
        },
        {
          name: '6A显示屏',
          comp: 'sixAMonitor'
        },
        {
          name: '司机显示屏',
          comp: 'hmi'
        }
      ]
    }
  }
}
</script>

<style scoped>
#singleCarContainer {
  display: flex;
  min-height: 100%;
  min-width: 100%;
  flex-direction: column;
}

.selectBox,
.tabBox {
  display: flex;
  margin-left: 25px;
  flex-grow: 0;
  flex-shrink: 0;
}

.selectBox {
  min-height: 80px;
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;
}

.tabBox {
  min-height: 53px;
  flex-direction: column;
  flex-grow: 1;
}

.selectBox span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}


.lineSelector {
  margin-left: 12px;
  width: 140px;
}

.trannumberText {
  margin-left: 20px;
}

.trainSelector {
  margin-left: 12px;
}

.contentBox {
  display: flex;
  flex-direction: column;
}
</style>

<style>
.el-tabs__nav-wrap::after {
  background-color: rgba(28, 40, 75, 1);
}

.el-tabs__item {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  padding-right: 56px;
}

.normalBtn {
  margin-left: 20px;
  width: 116px;
  height: 32px;
  background: #37456c;
  border-radius: 4px;
  padding: 0;
  border: 0px;
  color: rgba(255, 255, 255, 0.87);
}

.el-tab-pane {
    display: flex;
    flex-grow: 1;
}

.el-tabs {
    display: flex;
    flex-direction: column;
    flex-grow:1;
}

.el-tabs__content {
    display: flex;
    flex-grow: 1;
}

</style>
